const titles=document.querySelectorAll('.titles a')
const imgs=document.querySelectorAll('.imgs a')
let curIndex = 0, timer = null

// 移除选中
function removeActive(){
  titles.forEach(item => {
    item.classList.remove('active')
  })
  imgs.forEach(item => {
    item.classList.remove('active')
  })
}
// 改变banner
function changeBanner(index) {
  removeActive()
  titles[index].classList.add('active')
  imgs[index].classList.add('active')
}
// 自动播放
function autoBanner() {
  timer = setInterval(function () {
    curIndex++
    if (curIndex > titles.length - 1) {
      curIndex=0
    }
    changeBanner(curIndex)
  },2000)
}
// 添加事件
titles.forEach((item, index) => {
  // 鼠标移入
  item.addEventListener('mouseenter', function () {
    curIndex=index
    changeBanner(index)
    clearInterval(timer)
  })
  // 鼠标移出
  item.addEventListener('mouseleave', function () {
    autoBanner()
  })
})
autoBanner()
